<template>
  <div class="page register-page col center-span middle-span">
    <div class="title">用户注册</div>
    <Form ref="registerForm" :model="registerModel" :rules="registerRule" class="register-form">
      <Form-item prop="username">
        <Input type="text" v-model="registerModel.username" placeholder="用户名">
        <Icon type="ios-body" slot="prepend"></Icon>
        </Input>
      </Form-item>
      <Form-item prop="password">
        <Input type="password" v-model="registerModel.password" placeholder="密码">
        <Icon type="ios-locked-outline" slot="prepend"></Icon>
        </Input>
      </Form-item>
      <Form-item prop="passwordAgain">
        <Input type="password" v-model="registerModel.passwordAgain" placeholder="确认密码">
        <Icon type="ios-locked-outline" slot="prepend"></Icon>
        </Input>
      </Form-item>
      <Form-item>
        <Button class="login-button" type="primary" @click="registerHandle">注册</Button>
        <Button class="login-button" type="primary" @click="$router.go(-1)">返回</Button>
      </Form-item>
    </Form>
  </div>
</template>
<script>
  import { Users } from '/imports/collections'

  export default {
    meteor: {
      $subscribe: {
        users () {
          return [{
            username: this.registerModel.username
          }]
        }
      }
    },
    data () {
      return {
        registerModel: {
          username: '',
          password: '',
          passwordAgain: ''
        },
        registerRule: {
          username: [
            { required: true, message: '请填写用户名', trigger: 'blur' },
            { min: 5, message: '用户名长度不能小于6', trigger: 'blur' },
            { validator: this.validateUsername, trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 5, message: '用户名长度不能小于6', trigger: 'blur' },
            { validator: this.validatePassword, trigger: 'blur' }
          ],
          passwordAgain: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 5, message: '用户名长度不能小于6', trigger: 'blur' },
            { validator: this.validatePassword, trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      /**
       * 验证用户名
       */
      validateUsername (rule, value, callback) {
        if (Users.findOne({ username: this.registerModel.username })) {
          callback.call(this, '该用户已存在')
        } else {
          callback()
        }
      },
      /**
       * 验证密码
       */
      validatePassword (rule, value, callback) {
        if (this.registerModel.password && this.registerModel.passwordAgain && this.registerModel.password !== this.registerModel.passwordAgain) {
          callback.call(this, '两次密码输入不一致')
        } else {
          callback()
        }
      },
      /**
       * 用户注册
       */
      registerHandle () {
        this.$refs.registerForm.validate((valid) => {
          if (!valid) { return }

          Users.insert({
            username: this.registerModel.username,
            password: this.registerModel.password
          }, (error, result) => {
            if (!error) {
              this.$Message.success(' 注册成功')
              setTimeout(() => {
                this.$router.push('login')
              }, 1000)
            }
          })
        })
      }
    }
  }
</script>
<style scoped>
  .title {
    padding: 10px;
    font-size: 20px;
  }

  .register-form {
    width: 400px;
  }

  .login-button {
    width: 120px;
  }

</style>
